<template>
  <div>
    <div id="card-header-view">
      <span>卡片名称</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    <div id="card-list-view-container">
      <div class="box-card" shadow="hover" ref="fileViewListContainer" :style="cardHeightStyleFormat">
        <!--    <div slot="header" class="clearfix header">-->
        <!--      <span>卡片名称</span>-->
        <!--      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
        <!--    </div>-->
        <div v-for="(item, index) in listData" :key="item.name" class="text item">
          <el-link type="primary" @click="openDirOrFile(item, index)"><i :class="item.fileTypeIconKey"></i> {{item.name}}</el-link>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "FileViewCard",
    data() {
      return {
        cardHeight: 500
      }
    },
    methods: {
      openDirOrFile: function (item, index) {
        // console.log(item)
        // console.log(index)
        // console.log('-----')
        this.$emit("fileClickHandler", item, index);
      },
      adjustListHeight: function () {
        let fileListComponent = this.$refs.fileViewListContainer;
        // console.log(fileListComponent);
        let top = fileListComponent.getBoundingClientRect().top;
        // let top = fileListComponent.$el.getBoundingClientRect().top;
        // let availHeight = window.screen.availHeight;
        let availHeight = document.documentElement.clientHeight;
        this.cardHeight = availHeight - top;
        // console.log(this.cardHeight);
      }
    },
    mounted() {
      this.adjustListHeight();

    },
    props: {
      listData: {
        type: Array,
        default: function() {
          return [];
        }
      }
    },
    computed: {
      cardHeightStyleFormat: function () {
        return 'height: ' + this.cardHeight + 'px';
      }
    },
    watch: {
      listData() {
        this.adjustListHeight();
      }
    }
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /*.header {*/
  /*  padding-top: 8px;*/
  /*  padding-bottom: 8px;*/
  /*}*/

  .text, .header {
    background-color: #fff;
    border-top: 2px;
    border-color: #999999;

  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    /*height: 500px;*/
    overflow-y: scroll;
  }

  /*#card-header-view {*/
  /*  padding: 8px 6px;*/
  /*  float: top;*/
  /*}*/

  #card-header-view {
    background-color: #fff;
    padding: 8px 10px;
  }

  /*.el-card__body {*/
  /*  padding-top: 8px;*/
  /*}*/

  #card-list-view-container .box-card > div {
    padding: 10px;
  }


</style>
